<template>
	<view>
		<text v-if="transform !='translateY(0)'" class="secret-info">旧浪博客由lzzy.soft23制作</text>
		<view class="info-container" :style="bodyStyle" @touchstart="touchStart" @touchmove="touchMove"
			@touchend="touchEnd">
			<image src="/static/icons(1)/icon.png" class="icon-login"></image>
			<text class="info-welcome">WELCOME!</text>
			<text class="sub-welcome">欢迎加入旧浪博客</text>

			<view class="upload-pic-container" @click="clickChooseImage">
				<image :src="avatar" mode="aspectFill" class="img-avatar"></image>
				<text class="txt-avatar"> {{avatarName}}</text>
			</view>
			<input type="text" class="input-info" placeholder-class="input-holder" placeholder="请输入昵称" id="nick"
				@input="inputGet" />
			<input type="text" class="input-info" placeholder-class="input-holder" placeholder="请输入邮箱" id="email"
				@input="inputGet" />
			<input type="text" class="input-info" placeholder-class="input-holder" placeholder="请输入用户名" id="user"
				@input="inputGet" />
			<view class="pwd-container">
				<input v-if="isPwd" type="password" :value="password" id='password' @input="inputGet"
					placeholder="请输入密码" placeholder-class="input-holder" />
				<input v-else type="text" :value="password" id='password' @input="inputGet" placeholder="请输入密码"
					placeholder-class="input-holder" />
				<text :class="isPwd?'iconfont  ic-pwd-status':'iconfont  ic-pwd-status'" @click="switchPwd"></text>
			</view>
			<text class="btn-register" @click="clickRegister">注册</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transform: 'translateY(0)',
				transition: '',
				startY: 0,
				avatar: '/static/icons(1)/default_user.png',
				avatarName: '请点击并选择图片上传',
				nick: '',
				email: '',
				user: '',
				isPwd: true,
				password: ''
			}
		},
		computed: {
			bodyStyle: function() {
				return {
					'transform': this.transform,
					'transition': this.transition
				}
			}
		},
		methods: {
			touchStart(e) {
				//console.log(e);
				this.startY = e.touches[0].clientY
			},
			touchMove(e) {
				let distance = e.touches[0].clientY - this.startY
				if (distance < 0) {
					return
				}
				if (distance > 200) {
					distance = 200
				}
				this.transform = `translateY(${distance}rpx)`
				this.transition = ''
			},
			touchEnd(e) {
				this.transform = 'translateY(0)'
				this.transition = 'transform 300ms linear'
			},
			clickChooseImage() {
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res);
						let path = res.tempFilePaths[0]
						let url = this.$params.host + this.$params.action_upload
						uni.showLoading({
							title: '上传头像......',
							mask: false
						});
						this.$req.postFile(url, 'file', path, {}, res => {
							let json = JSON.parse(res.data)
							this.avatarName = json.data
							this.avatar = this.$params.host + this.avatarName
						}, () => {
							uni.hideLoading()
						})
					}
				})
			},
			inputGet(e) {
				console.log(e);
				let target = e.currentTarget.id //'nick'
				this[`${target}`] = e.detail.value //this.nick
			},
			checkValid() {
				if (!this.$checkLen(this.user, 6, "用户名")) {
					return false
				}
				if (!this.$checkLen(this.nick, 6, "昵称")) {
					return false
				}
				if (!this.$checkLen(this.password, 6, "密码")) {
					return false
				}
				let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
				if (!reg.test(this.email)) {
					uni.showToast({
						title: '电子邮箱格式不正确',
						icon: 'none'
					});
					return false
				}
				if (this.avatarName == '请点击并选择图片上传' || this.avatarName.length == 0) {
					uni.showToast({
						title: '请选择图片上传',
						icon: 'none'
					});
					return false
				}
				return true

			},
			clickRegister() {
				if (!this.checkValid()) {
					return
				}
				//todo: 提交信息到服务器
				uni.showLoading({
					title: '提交注册......',
					mask: false
				});
				let data = {
					"nick_name": this.nick,
					"user_name": this.user,
					"avatar": this.avatarName,
					"password": this.password,
					"email": this.email
				}
				let url = this.$params.host + this.$params.action_register
				this.$req.post(url, data, res => {
					console.log(res);

					//todo:保存用户信息到全局数据，通知相关页面
					res = res.data
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					if (!res.success) {
						return
					}
					let app = getApp()
					app.globalData.id = res.data.id
					app.globalData.avatar = res.data.avatar
					app.globalData.userName = res.data.userName
					app.globalData.nickName = res.data.nickName
					app.globalData.token = res.data.token
					app.globalData.email = res.data.email
					app.globalData.type = res.data.type
					this.$noti.post(this.$params.noti_login_status)
				}, () => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>
	@import url("register.css");
</style>